<template>
  <div>
      <p>--------$refs------</p>
      <p>1.获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是一个弱小的h1</h1>
       <p>--------$refs 组件调用------</p>
      <p>2.获取组件对象 - 可调用组件</p>
      <Demo ref="de"></Demo>
      <p>-----------------</p>
      <p>3 vue 更新dom是异步的</p>
      <p ref="myP">{{count}}</p>
      <button @click="btn">加一</button>
       <p>-----------------</p>
       
  </div>
</template>

<script>
import Demo from './child/Demo'
export default {
    mounted () {
        console.log(document.querySelectorAll('#h'))
        console.log(this.$refs.myH)
        let demoObj = this.$refs.de;
        demoObj.fn()

    },
    components: {
        Demo
    },
    methods: {
        btn(){
            this.count++;
            // 开启一个DOM跟新队列（异步队列）
            // console.log(this.$refs.myP.innerHTML)
            // 解决：this.$nextTick()
            // 过程：DOM更新完全后会挨个触发$nextTick里的函数体
            this.$nextTick(()=>{
                console.log(this.$refs.myP.innerHTML)
            })
        }
    },
    data () {
        return {
            count:0
        }
    }
}
</script>

<style>

</style>